<template>
  <view>
    <u-search :placeholder="placeholder" v-model="keyword" :showAction="showAction"
      :clearabled="clearabled" :bgColor="bgColor" :placeholderColor="placeholderColor"
      :searchIconColor="searchIconColor" :color="color" @clickIcon="clickIcon"
      @search="onSearch" @clear="clear"
      @change="$u.throttle(onChange, 1500, immediate=false)"></u-search>
  </view>
</template>

<script>
  import props from './props';
  export default {
    name: "WebSearch",
    mixins: [ props ],
    data() {
      return {
        keyword: ''
      };
    },
    methods: {
      clickIcon() {
        this.$emit( 'search', this.keyword )
      },
      onSearch() {
        this.$emit( 'search', this.keyword )
      },
      clear() {
        this.$emit( 'search', undefined )
      },
      onChange() {
        console.log( this.keyword, 'this.keyword' );
        if ( !this.keyword ) this.clear()
        else this.onSearch()
      }
    }
  }
</script>

<style lang="scss">

</style>